<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "brokenline",
  props: {
    title: "",
    tableChoice: "",
    unit: "",
  },
  data() {
    return {
      echartsList: [],
      isDownLoad: 0,
      list: [],
      decrementList: [],
      labelName: "",
      labelName1: "",
      dataColumn: [],
      dataColumn1: [],
      openColumn: [],
      openColumn1: [],
      worldMapContainer: {},
    };
  },
  mounted() {
    this.worldMapContainer = document.getElementById("main");
    //设置容器高宽
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
  },
  created() {},

  methods: {
    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    resizeWorldMapContainer() {
      if (this.isDownLoad == 1) {
        this.worldMapContainer.style.width = "3840px";
        this.worldMapContainer.style.height = "2164px";
      } else {
        this.worldMapContainer.style.width = window.innerWidth - 270 + "px";
        this.worldMapContainer.style.height = window.innerHeight - 20 + "px";
      }
    },

    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL();
      // window.open(url);
    },

    async drawLine(echartsList) {
      this.echartsList = echartsList;
      let value = this.echartsList[0].dataColumn;
      this.list = this.echartsList[0].dataList;

      if (echartsList != null && echartsList.length > 0) {
        let ylist = [];
        let xlist = [];
        let ylist1 = [];
        let xlist1 = [];
        let legends = [];
        let e = this.echartsList[0].dataList;
        this.dataColumn = this.echartsList[0].dataColumn;
        this.openColumn = this.echartsList[0].openColumn;
        this.labelName = e[0][this.openColumn];

        xlist = e.map((item) => item.create_time);
        ylist = e.map((item) => item[this.dataColumn]);

        if (this.echartsList.length > 1) {
          this.echartsList1 = this.echartsList[1].dataList;
          this.dataColumn1 = this.echartsList[1].dataColumn;
          this.openColumn1 = this.echartsList[1].openColumn;
          this.labelName1 = this.echartsList1[0][this.openColumn1];
          xlist1 = this.echartsList1.map((item) => item.year_date);
          ylist1 = this.echartsList1.map((item) => item[this.dataColumn1]);
          this.lableName = this.echartsList1[0].the_breed;
          this.decrementList = this.echartsList[2].dataList.map(
            (item) => item.closing_price
          );

          // let arrs = e.map((item) => {
          //   item.value1 = item[value];
          //   const data = this.echartsList1.find(
          //     (i) => item.create_time == i.create_time
          //   );
          //   if (data) {
          //     return {
          //       ...item,
          //       ...data,
          //     };
          //   }
          // });
          // arrs = arrs.filter((item) => item != undefined);
          // for (var i = 0; i < arrs.length; i++) {
          //   arrs[i].decrement = arrs[i][value] - arrs[i].value1;
          // }
          // this.decrementList = arrs.map((item) => item.decrement);
        }

        let myChart = echarts.init(this.worldMapContainer);
        let option = {
          tooltip: {
            trigger: "axis",
          },
          title: {
            text: this.title,
            x: "center",
            y: "top",
            textAlign: "left",
            textStyle: {
              fontSize: "22",
            },
          },
          animation: false,
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              saveAsImage: { show: true },
            },
          },

          legend: {
            data: [this.labelName1, this.labelName, "基差"],
            x: "right", //可设定图例在左、右、居中
            padding: [0, 50, 0, 0],
            textStyle: {
              fontSize: "16",
            },
          },
          xAxis: {
            data: xlist,
            axisLabel: {
              // interval: 30,
            },
          },
          grid: {
            show: true,
            left: "10px",
            right: "10px",
            bottom: "0px",
            top: "60px",
            containLabel: true,
            borderWidth: 1,
            borderColor: "#D1D1D1",
            backgroundColor: "#fff",
          },
          yAxis: [
            {
              axisLabel: {},
              scale: true,
              name: "",
              type: "value",
              position: "left",
              splitLine: {
                show: true, //不显示横向网格线
              },
              nameTextStyle: {
                fontSize: "16",
              },
            },
            {
              axisLabel: {},
              type: "value",
            },
          ],
          series: [
            {
              name: this.labelName1,
              data: ylist1,
              type: "line",
              yAxisIndex: 0,
            },
            {
              name: this.labelName,
              data: ylist,
              type: "line",
              yAxisIndex: 0,
            },
            {
              name: "基差",
              data: this.decrementList,
              type: "bar",
              yAxisIndex: 1,
              emphasis: {
                focus: "series",
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgb(255, 158, 68)",
                  },
                  {
                    offset: 1,
                    color: "rgb(255, 70, 131)",
                  },
                ]),
              },
            },
          ],
        };
        option.yAxis[0].name = "单位：" + this.unit;

        if (this.isDownLoad == 1) {
          option.yAxis[0].nameTextStyle = {
            fontSize: 60, //  字体大小
            lineHeight: 100,
            padding: [-120, 15, 4, 0], //  内填充
          };
          option.xAxis.axisLabel = { fontSize: "72", lineHeight: 150 };
          option.yAxis[0].axisLabel = { fontSize: "72" };
          option.yAxis[1].axisLabel = { fontSize: "72" };
          option.title.textStyle.fontSize = 90;
          option.title.textStyle.lineHeight = 90;
          option.grid.top = 150;
          option.grid.right = 100;
          option.legend.textStyle.fontSize = 40;
          option.legend.textStyle.fontWeight = 40;
          option.legend.itemHeight = 20;
          option.legend.itemWidth = 40;
          option.legend.icon = "rect";
          option.legend.top = 40;
          option.legend.padding = [20, 240, 0, 0];
          option.series[0].lineStyle = {
            width: 20,
            type: "solid",
          };
          option.series[0].color = "#ee6666";
          option.series[1].color = "#5470c6";
          option.series[2].color = "#56c1ce";
          option.series[1].lineStyle = {
            width: 20,
            type: "solid",
          };
          option.series[2].lineStyle = {
            width: 20,
            type: "solid",
          };
        }

        myChart.setOption(option);

        if (this.isDownLoad == 1) {
          const chartImgUrl = myChart.getDataURL({
            pixelRatio: 1,
            backgroundColor: "",
            type: "png",
          });
          setTimeout(() => {
            this.downloadFile(chartImgUrl, this.title);
          }, 1000);
        }
      }
    },
  },
};
</script>

<style scoped>
#main {
  width: 100%;
  height: 900px;
}
</style>
